<template>
	<view class="member-list">
		<view v-for="member in members" :key="member.id" class="member-item" @click="handleMemberClick(member)">
			<!-- 成员头像 -->
			<view class="member-avatar">
				<image :src="member.avatar" mode="aspectFill"
					class="avatar-image" />
				<!-- 在线状态指示器 -->
				<view class="online-indicator" v-if="member.memberStatus === 1"></view>
			</view>

			<!-- 成员信息 -->
			<view class="member-info">
				<view class="member-basic">
					<text class="member-name">{{ member.nickName || '未知用户' }}</text>
					<view class="member-badges">
						<!-- 角色徽章 -->
						<view class="role-badge" :class="getRoleClass(member.memberRole)">
							<text class="role-text">{{ getRoleText(member.memberRole) }}</text>
						</view>
						<!-- 等级徽章 -->
						<view class="level-badge" v-if="member.userLevel">
							<text class="level-text">Lv.{{ member.userLevel }}</text>
						</view>
					</view>
				</view>

				<view class="member-meta">
					<text class="join-time">{{ formatJoinTime(member.joinedTime) }}</text>
					<!-- 状态标识 -->
					<view class="status-indicators">
						<view v-if="member.blacklistStatus === 1" class="status-tag blacklist">
							<text>已拉黑</text>
						</view>
						<view v-if="member.memberStatus === 2" class="status-tag inactive">
							<text>已退出</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 操作按钮 -->
			<view class="member-actions">
				<view class="action-btn" @click.stop="handleMoreActions(member)">
					<uni-icons type="more-filled" size="16" color="#999"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { defineProps, defineEmits } from 'vue'
	import type { CircleMemberRelation } from '@/api/circle/circle'

	// Props定义
	interface Props {
		members : CircleMemberRelation[]
	}

	const props = withDefaults(defineProps<Props>(), {
		members: () => []
	})

	// 事件定义
	const emit = defineEmits<{
		memberClick : [member: CircleMemberRelation]
		moreActions : [member: CircleMemberRelation]
	}>()

	// 获取角色样式类
	const getRoleClass = (role : 1 | 2 | 3) => {
		switch (role) {
			case 3:
				return 'role-owner'
			case 2:
				return 'role-admin'
			case 1:
			default:
				return 'role-member'
		}
	}

	// 获取角色文本
	const getRoleText = (role : 1 | 2 | 3) => {
		switch (role) {
			case 3:
				return '圈主'
			case 2:
				return '管理员'
			case 1:
			default:
				return '成员'
		}
	}

	// 格式化加入时间
	const formatJoinTime = (time : string) => {
		if (!time) return ''

		const date = new Date(time)
		const now = new Date()
		const diff = now.getTime() - date.getTime()

		const days = Math.floor(diff / (1000 * 60 * 60 * 24))
		const hours = Math.floor(diff / (1000 * 60 * 60))
		const minutes = Math.floor(diff / (1000 * 60))

		if (days > 30) {
			return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
		} else if (days > 0) {
			return `${days}天前加入`
		} else if (hours > 0) {
			return `${hours}小时前加入`
		} else if (minutes > 0) {
			return `${minutes}分钟前加入`
		} else {
			return '刚刚加入'
		}
	}

	// 处理成员点击
	const handleMemberClick = (member : CircleMemberRelation) => {
		emit('memberClick', member)
	}

	// 处理更多操作
	const handleMoreActions = (member : CircleMemberRelation) => {
		emit('moreActions', member)
	}
</script>

<style lang="scss" scoped>
	.member-list {
		background: white;

		.member-item {
			display: flex;
			align-items: center;
			padding: 24rpx;
			border-bottom: 1rpx solid #f0f0f0;
			cursor: pointer;
			transition: background-color 0.2s ease;

			&:last-child {
				border-bottom: none;
			}

			&:active {
				background: #f8f9fa;
			}

			.member-avatar {
				position: relative;
				width: 80rpx;
				height: 80rpx;
				margin-right: 24rpx;

				.avatar-image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					border: 2rpx solid #f0f0f0;
				}

				.online-indicator {
					position: absolute;
					bottom: 2rpx;
					right: 2rpx;
					width: 20rpx;
					height: 20rpx;
					background: #22c55e;
					border: 3rpx solid white;
					border-radius: 50%;
				}
			}

			.member-info {
				flex: 1;

				.member-basic {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 8rpx;

					.member-name {
						font-size: 28rpx;
						font-weight: 500;
						color: #333;
					}

					.member-badges {
						display: flex;
						gap: 8rpx;

						.role-badge {
							padding: 4rpx 8rpx;
							border-radius: 8rpx;

							.role-text {
								font-size: 20rpx;
								font-weight: 500;
							}

							&.role-owner {
								background: #fef3c7;

								.role-text {
									color: #d97706;
								}
							}

							&.role-admin {
								background: #dbeafe;

								.role-text {
									color: #2563eb;
								}
							}

							&.role-member {
								background: #f3f4f6;

								.role-text {
									color: #6b7280;
								}
							}
						}

						.level-badge {
							padding: 4rpx 8rpx;
							background: #f0f9ff;
							border-radius: 8rpx;

							.level-text {
								font-size: 20rpx;
								color: #0ea5e9;
								font-weight: 500;
							}
						}
					}
				}

				.member-meta {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.join-time {
						font-size: 24rpx;
						color: #999;
					}

					.status-indicators {
						display: flex;
						gap: 8rpx;

						.status-tag {
							padding: 2rpx 8rpx;
							border-radius: 6rpx;
							font-size: 20rpx;

							&.blacklist {
								background: #fee2e2;
								color: #dc2626;
							}

							&.inactive {
								background: #f3f4f6;
								color: #6b7280;
							}
						}
					}
				}
			}

			.member-actions {
				.action-btn {
					width: 60rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
					transition: background-color 0.2s ease;

					&:active {
						background: #f0f0f0;
					}
				}
			}
		}
	}
</style>